<template>
    <div>
      <div class="row">
        <div style="flex-shrink: 0;font-size: 14px;">序号：</div><el-input size="mini" style="width: 60px;margin-right: 20px;" v-model="nodeModel.sort"></el-input>
        <div style="flex-shrink: 0;font-size: 14px;">是否显示：</div><el-switch v-model="nodeModel.isShow" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#999999"></el-switch>
        <div style="margin-left: 20px;">
            <el-button @click="selectTemplate" size="mini">选用模版</el-button>
          </div>
      </div>
      <div class="row">
          <div style="flex-shrink: 0;font-size: 14px;">背景色：</div>
          <el-input size="mini" style="width: 100px;"  v-model="nodeModel.configDict.componentStyle.background"></el-input>
          <el-color-picker v-model="nodeModel.configDict.componentStyle.background"></el-color-picker>
      </div>
      <div class="row">
        <div style="flex-shrink: 0;font-size: 14px;margin-right: 20px;">滚动方向：</div>
        <el-radio v-model="nodeModel.configDict.componentStyle.direction" label='row'>横向滚动</el-radio>
        <el-radio v-model="nodeModel.configDict.componentStyle.direction" label='column'>竖向滚动</el-radio>
      </div>
      <div class="column">
          <jcSlider title="上外边距："><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.marginTop" :min="0" :max="750" show-input input-size="mini"></el-slider></jcSlider>
          <jcSlider title="下外边距："><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.marginBottom" :min="0" :max="750" show-input input-size="mini"></el-slider></jcSlider>
          <jcSlider title="左右外边距："><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.marginLeft" :min="0" :max="750" show-input input-size="mini"></el-slider></jcSlider>
      </div>
      <div class="column">
        <jcSlider title="每秒滚动距离：" :result="nodeModel.configDict.componentStyle.speed"><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.speed" :min="20" :max="200" show-input input-size="mini"></el-slider></jcSlider>
        <jcSlider title="每页滚动时长：" :result="nodeModel.configDict.componentStyle.duration"><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.duration" :min="500" :max="5000" show-input input-size="mini"></el-slider></jcSlider>
      </div>
      <div class="column">
        <jcSlider title="字体大小："><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.fontsizeForText1" :min="10" :max="100" show-input input-size="mini"></el-slider></jcSlider>
      </div>
      <div class="row" style="margin-left: 50px;">
        <div style="flex-shrink: 0;font-size: 14px;">字体颜色：</div>
        <el-input size="mini" style="width: 100px;"  v-model="nodeModel.configDict.componentStyle.colorForText1"></el-input>
        <el-color-picker v-model="nodeModel.configDict.componentStyle.colorForText1"></el-color-picker>
      </div>
      <!-- 图文列表内容区域 -->
      <div class="row" style="margin-top: 20px;">
        <div style="flex-shrink: 0;font-size: 14px;margin-right: 20px;">内容选择方式：</div>
        <el-radio v-model="nodeModel.configDict.componentStyle.options1" label='static'>静态内容</el-radio>
        <el-radio v-model="nodeModel.configDict.componentStyle.options1" label='dynamic'>动态内容</el-radio>
      </div>
      <div style="border: 1px solid #eee;padding: 10px;margin-top: 10px;" v-if="nodeModel.configDict.componentStyle.options1 == 'static'">
        <div style="display: flex;flex-direction: row;margin-bottom: 10px;position: relative;" v-for="(item, index) in nodeModel.configDict.itemList" :key='index'>
          <div style="display: flex;flex-direction: row;align-items: center;margin-left: 10px;"><div style="flex-shrink: 0;">内容{{index+1}}：</div><el-input style="margin-left: 0px;" v-model="item.title"></el-input></div>
          <div style="position: absolute;left: -15px;top: -15px;" @click="deleteAdvert(index)"><i class="el-icon-circle-close"></i></div>
        </div>
        <div style="width: 100%;"><el-button @click="insertAdvert">添加一个</el-button></div>
      </div>
      <div style="border: 1px solid #eee;padding: 10px;margin-top: 10px;" v-if="nodeModel.configDict.componentStyle.options1 == 'dynamic'">
        <div style="display: flex;flex-direction: row;margin-bottom: 10px;position: relative;">
          <div style="display: flex;flex-direction: row;align-items: center;margin-left: 10px;"><div style="flex-shrink: 0;">内容：</div><el-input style="margin-left: 0px;" v-model="nodeModel.configDict.itemStyle.query" :disabled="!passRole(['admin'])"></el-input></div>
        </div>
        <div style="width: 100%;"><el-button @click="insertAdvert">添加一个</el-button></div>
      </div>
    </div>
</template>

<script>
    import custom from '@/components/jcupload/custom'
    import jcSlider from '@/views/interface/composing/components/jc-slider'
  export default {
    components: {
        custom,
        jcSlider
    },
    props:{
      nodeModel:{
        type: Object,
        default: res=>{}
      }
    },
    data() {
      return {

      }
    },
    created() {
      // 设置默认内容方式
      if(!this.nodeModel.options1){
        this.nodeModel.options1 = 'static'
      }
    },
    methods:{
        insertAdvert(){
            this.$emit('insertAdvert', {name: this.nodeModel.componentModel.name})
        },
        deleteAdvert(index){
            this.$emit('deleteAdvert', index)
        },
        selectRoute(item){
            this.$emit('selectRoute', item)
        },
        selectTemplate(){
            this.$emit('selectTemplate')
        },
    }
  }
</script>

<style lang="scss" scoped>
  @import './commonStyle.scss';
</style>